<!DOCTYPE html>
<html lang="en">
<head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="../../../js/jquery.min.js"></script> 
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>
    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
    <!-- A link to a Boostrap  and jqGrid Bootstrap CSS siles-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid-bootstrap.css" />
	<script>
		$.jgrid.defaults.width = 780;
		$.jgrid.defaults.responsive = true;
		$.jgrid.defaults.styleUI = 'Bootstrap';
	</script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <meta charset="utf-8" />
    <title>jqGrid Functionality - Custom Formatters</title>
</head>
<body>
<div style="margin-left:20px">
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
</div>
    <script type="text/javascript"> 
    
        $(document).ready(function () {
            $("#jqGrid").jqGrid({
                url: 'data.json',
                datatype: "json",
                colNames: ['ID', 'Photo File Name', 'Photo', 'Rating'],
                colModel: [
                    {
                        name: 'ID',
                        width: 75                       
                    },
                    {
                        name: 'FileName',
                        width: 150  
                    },
                    {
                        name: 'Photo',
                        width: 150,
						align: 'center',
                        formatter: formatImage
                    },
                    {
                        name: 'Rating',
                        width: 50,
                        formatter: formatRating
                    }
                ],
                autowidth: false,
                height: 300,
                rowNum: 150,
				loadonce : true,
                pager: "#jqGridPager"
            });
        });

        // The FormatFunction for CustomFormatter gets three parameters           
        // cellValue - the original value of the cell
        // options - as set of options, e.g
        //   options.rowId - the primary key of the row
        //   options.colModel - colModel of the column
        // rowData - array of cell data for the row, so you can access other cells in the row if needed

        function formatImage(cellValue, options, rowObject) {
            var imageHtml = "<img src='images/" + cellValue + "' originalValue='" + cellValue + "' />";
            return imageHtml;
        }

        // The FormatFunction for CustomFormatter gets three parameters           
        // cellValue - the original value of the cell
        // options - as set of options, e.g
        //   options.rowId - the primary key of the row
        //   options.colModel - colModel of the column
        // cellObject - the HMTL of the cell (td) holding the actual value
        function unformatImage(cellValue, options, cellObject) {
            return $(cellObject.html()).attr("originalValue");
        }

        function formatRating(cellValue, options, rowObject) {
            var color = (parseInt(cellValue) > 0) ? "green" : "red";
            var cellHtml = "<span style='color:" + color + "' originalValue='" +
                                 cellValue + "'>" + cellValue + "</span>";

            return cellHtml;
        }

        function unformatRating(cellValue, options, cellObject) {
            return $(cellObject.html()).attr("originalValue");
        }


    </script>

    <!-- This code is related to code tabs -->
    <br />
    <span style="margin-left:18px; font-family: Tahoma">Click on the Tabs below the see the relevant code for the example:</span>
    <br /><br />
    <div id="codetabs" style="width:700px; height: 400px; font-size:65%;"></div>
     
    <script type="text/ecmascript" src="../../../js/prettify/prettify.js"></script>
    <link rel="stylesheet" href="../../../css/prettify.css" />
        <script type="text/ecmascript" src="../../../js/codetabs-b.js"></script>
		
    
    <script type="text/javascript">

        var tabData =
            [
                { name: "HTML", url: "index.html", lang: "lang-html" },
                { name: "Data.JSON", url: "data.json", lang: "lang-json" },
				{ name: "Description", url: "description.html", lang: "lang-html" }
            ];

        codeTabs(tabData);

    </script>
    <!-- End of code related to code tabs -->
</body>
</html>